const G6 = require('@antv/g6');
const G6Plugins = require('@antv/g6/build/plugins');
export function init(width, height, boxid, data,types,vm) {
  // 自定义末处轨迹箭头(在末尾终止点添加属性resends并且定义轨迹的最后一个坐标为轨迹末点)
  G6.registerEdge('line-arrow', {
    draw(cfg, group) {
      const {
        startPoint,
        controlPoints,
        resEnds,
        endPoint,
      } = cfg;
      const node = cfg.targetNode._cfg 
      //bboxCache
      let arr = [];
      arr.push(['M', startPoint.x, startPoint.y]); // 设置线的起始位置
      if (controlPoints && controlPoints.length > 0) {
        controlPoints.map((val) => {
          if(val.x !== startPoint.x && val.y !== startPoint.y){
            console.log(val)
            arr.push(['L', val.x, startPoint.y]);
          }
          arr.push(['L', val.x, val.y]);// 设置线的终点位置
          return arr;
        });
      }
      if (!resEnds) {
        if(endPoint.x !== startPoint.x && endPoint.y !== startPoint.y){
          console.log('endPoint',endPoint)
          arr.push(['L',endPoint.x,startPoint.y])
          // arr.push(['H',endPoint.x-startPoint.x])
        }
          arr.push(['L', endPoint.x, endPoint.y]);// 设置线的终点位置
      }
  
      const shape = group.addShape('path', {
        attrs: {
          lineWidth: 2,
          stroke: '#0d3f98',
          path: arr,
          endArrow: {
            path: 'M 5,0 L -5,-5 L -5,5 z',
            d: 5
          }
        }
      });
      return shape;
    }
  });
  //计算节点位置
  const nodes = data.nodes
  for(var nodeIndex = 0,nodeLength = nodes.length; nodeIndex < nodeLength; nodeIndex++){
    if(nodeIndex === 0){
      nodes[nodeIndex].x = 100;
      nodes[nodeIndex].y = 50;
    }else {
      if (nodes[nodeIndex].dataType === nodes[0].dataType){
        nodes[nodeIndex].x = nodes[0].x;
      }else {
        const typeLen = types.length
        for(var j = 0;j< typeLen ;j++){
          if(nodes[nodeIndex].dataType === types[j]){
            nodes[nodeIndex].x = (width-100) / typeLen * (j);
          }
        }
      }
      nodes[nodeIndex].y = nodes[nodeIndex-1].y + 100;
    }
  }    
  // G6.registerEdge(
  //   'line-arrow', 
  //   {
  //     getPath(points) {
  //       const startPoint = points[0];
  //       const endPoint = points[1];
  //       return [
  //         ['M', startPoint.x, startPoint.y],
  //         ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y],
  //         ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y],
  //         ['L', endPoint.x, endPoint.y],
  //       ];
  //     },
  //     getShapeStyle(cfg) {
  //       const startPoint = cfg.startPoint;
  //       const endPoint = cfg.endPoint;
  //       const controlPoints = this.getControlPoints(cfg);
  //       let points = [startPoint]; // the start point
  //       // the control points
  //       if (controlPoints) {
  //         points = points.concat(controlPoints);
  //       }
  //       // the end point
  //       points.push(endPoint);
  //       const path = this.getPath(points);
  //       const style = Object.assign(
  //         {},
  //         G6.Global.defaultEdge.style,
  //         {
  //           stroke: '#BBB',
  //           lineWidth: 1,
  //           path,
  //         },
  //         cfg.style,
  //       );
  //       return style;
  //     },
  //   },
  //   'line',
  // );
  //G6自定义形状
  G6.registerNode('operation', {
    drawShape: function drawShape(cfg, group) {
      var rect = group.addShape('rect', { //设置节点形状为长方形
        attrs: {
          x: -75,
          y: -25,
          width: 150,
          height: 50,
          radius: 10,
          stroke: '#00C0A5',
          fill: '#92949F',
          fillOpacity: 0.45,
          lineWidth: 2
        }
      });
      return rect;
    }
  },'rect'); //简单形状
  G6.registerBehavior('activate-node', {
    getEvents() {
      return {
        'node:click': 'onNodeClick'
      };
    },
    onNodeClick(e) {
      alert(1111)
      const graph = this.graph;
      const item = e.item;
      if (item.hasState('active')) {
        graph.setItemState(item, 'active', false);
        return;
      }
      // this 上即可取到配置，如果不允许多个 'active'，先取消其他节点的 'active' 状态
      if (!this.multiple) {
      // this.removeNodesState();
      }
      // 置点击的节点状态 'active' 为 true
      // graph.setItemState(item, 'active', true);
    }
  });

  var graph = new G6.Graph({
    container: boxid,
  width: width,
  height: height,
  layout:{
    type: 'compactBox',
    direction:'TB',
  },
    pixelRatio: 1, //像素比
    groupType: 'circle',
    groupStyle:{
      default: {
      x: 150,
      y: 150,
      width: 150,
      height: 150,
      // stroke: 'black',
      // radius: [2, 4]
      },
      hover: {},
      collapse: {} 
    },
    modes: { //增加行为
    //drag-canvas 拖拽
    //zoom-canvas 缩放
      default: ['activate-node','drag-canvas']
    },
    defaultNode: {
      shape: 'operation', //
      labelCfg: { //字体样式
        style: {
          fill: '#666',
          fontSize: 14,
          fontWeight: 'bold'
        }
      }
    },
    defaultEdge: { //连接线的样式
      shape: 'line-arrow'
    },
  });
  // var graph = new G6.Graph({
  // container: boxid,
  // width: width,
  // height: height,
  // defaultNode: {
  //   shape: "rect",
  //   size:[100,50],
  //   style: {
  //     fill: '#CFD9EA',
  //     stroke: 'transparent' // 边框透明
  //   },
  //   labelCfg: {
  //     style: {
  //       fill: '#4A4A4A',
  //       fontSize: 12
  //     }
  //   }
  // },
  // defaultEdge: {
  //   shape:'line-arrow',
  //   style: {
  //     fill: '#fff',
  //     fontSize: 14
  //   }
  // },
  // // 交互模式集合
  // modes: {
  //   // 默认交互模式
  //   // default: ['click-add-node', 'click-add-edge', 'click-select'],
  //   default: ['activate-node'],
  //   // 增加节点交互模式
  //   // addNode: ['click-add-node', 'click-select'],
  //   // 增加边交互模式
  //   // addEdge: ['click-add-edge', 'click-select']
  // }
  //   /** modes: {
  //        default: [
  //            "click-add-edge"
  //          "drag-canvas",//允许拖拽画布
  //          "zoom-canvas",// 放缩画布
  //          "click-select",
  //          "drag-node", // 拖拽节点
  //          {
  //            type: "tooltip",
  //            formatText(model) {
  //            //   const cfg = model.conf;
  //            //   const text = [];
  //            //   cfg.forEach((row) => {
  //            //     text.push(row.label + ":" + row.value + "<br>");
  //            //   });
  //              return model.info.user +'<br/>' + model.info.time;
  //            },
  //            offset: 30,
  //          },
  //        ]
  //    }, */
  //   //   fitView: true, // 适应视图
 
 
  //   // 默认线的颜色
  //   // edgeStyle: {
  //   //   default: { stroke: 'red' }
  //   // }
  // });
 
 

  function rend() {
    return new Promise(function (resolve, reject) {
      graph.data(data);
      graph.render();
      resolve();
    });
  }
   // 根据状态自定义样式
  function setStatus() {
    return new Promise(function (resolve, reject) {
      for (let i = 0; i < data.nodes.length; i++) {
        if (data.nodes[i].status === 1) {
          data.nodes[i].style.fill = '#d0d9eb';
          data.nodes[i].labelCfg.style.fill = '#4c4c4c';
        } else if (data.nodes[i].status === 2) {
          data.nodes[i].style.fill = '#0d3f98';
          data.nodes[i].labelCfg.style.fill = '#fff';
        } else {
          data.nodes[i].style.fill = '#dbdbdb';
          data.nodes[i].labelCfg.style.fill = '#545454';
        }
      }
      resolve();
    });
  }
  async function resStyle() {
    await rend();
    // await setStatus();
    graph.render();
    // graph.setMode('default');
    // graph.setMode('addEdge');
    // graph.setMode('addNode');
  }
  resStyle();
}

 
// export function renderMap(data,graph){
//   const collapseIcon = (x, y, r) => {
//     return [
//       ['M', x - r, y],
//       ['a', r, r, 0, 1, 0, r * 2, 0],
//       ['a', r, r, 0, 1, 0, -r * 2, 0],
//       ['M', x - r + 4, y],
//       ['L', x - r + 2 * r - 4, y],
//     ];
//   };
//   const expandIcon = (x, y, r) => {
//     return [
//       ['M', x - r, y],
//       ['a', r, r, 0, 1, 0, r * 2, 0],
//       ['a', r, r, 0, 1, 0, -r * 2, 0],
//       ['M', x - r + 4, y],
//       ['L', x - r + 2 * r - 4, y],
//       ['M', x - r + r, y - r + 4],
//       ['L', x, y + r - 4],
//     ];
//   };

//   G6.registerCombo('cRect', {
//     drawShape: function drawShape(cfg, group) {
//       const self = this;
//       // Get the padding from the configuration
//       cfg.padding = cfg.padding || [50, 20, 20, 20];
//       // Get the shape's style, where the style.width and style.height correspond to the width and height in the figure of Illustration of Built-in Rect Combo
//       const style = self.getShapeStyle(cfg);
//       // Add a rect shape as the keyShape which is the same as the extended rect Combo
//       const rect = group.addShape('rect', {
//         attrs: {
//           ...style,
//           x: -style.width / 2 - (cfg.padding[3] - cfg.padding[1]) / 2,
//           y: -style.height / 2 - (cfg.padding[0] - cfg.padding[2]) / 2,
//           width: style.width,
//           height: style.height
//         },
//         draggable: true,
//         name: 'combo-keyShape'
//       });
//       // Add the circle on the right
//       group.addShape('marker', {
//         attrs: {
//           ...style,
//           fill: '#fff',
//           opacity: 1,
//           // cfg.style.width and cfg.style.heigth correspond to the innerWidth and innerHeight in the figure of Illustration of Built-in Rect Combo
//           x: cfg.style.width / 2 + cfg.padding[1],
//           y: (cfg.padding[2] - cfg.padding[0]) / 2,
//           r: 10,
//           symbol: collapseIcon
//         },
//         draggable: true,
//         name: 'combo-marker-shape'
//       });
//       return rect;
//     },
//     // Define the updating logic of the right circle
//     afterUpdate: function afterUpdate(cfg, combo) {
//       const group = combo.get('group');
//       // Find the circle shape in the graphics group of the Combo by name
//       const marker = group.find(ele => ele.get('name') === 'combo-marker-shape');
//       // Update the position of the right circle
//       marker.attr({
//         // cfg.style.width and cfg.style.heigth correspond to the innerWidth and innerHeight in the figure of Illustration of Built-in Rect Combo
//         x: cfg.style.width / 2 + cfg.padding[1],
//         y: (cfg.padding[2] - cfg.padding[0]) / 2,
//         // The property 'collapsed' in the combo data represents the collapsing state of the Combo
//         // Update the symbol according to 'collapsed'
//         symbol: cfg.collapsed ? expandIcon : collapseIcon
//       });
//     }
//   }, 'rect');

//   G6.registerEdge(
//     'line-arrow', 
//     {
//       getPath(points) {
//         const startPoint = points[0];
//         const endPoint = points[1];
//         return [
//           ['M', startPoint.x, startPoint.y],
//           ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y],
//           ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y],
//           ['L', endPoint.x, endPoint.y],
//         ];
//       },
//       getShapeStyle(cfg) {
//         const startPoint = cfg.startPoint;
//         const endPoint = cfg.endPoint;
//         const controlPoints = this.getControlPoints(cfg);
//         let points = [startPoint]; // the start point
//         // the control points
//         if (controlPoints) {
//           points = points.concat(controlPoints);
//         }
//         // the end point
//         points.push(endPoint);
//         const path = this.getPath(points);
//         const style = Object.assign(
//           {},
//           G6.Global.defaultEdge.style,
//           {
//             stroke: '#BBB',
//             lineWidth: 1,
//             path,
//           },
//           cfg.style,
//         );
//         return style;
//       },
//     },
//     'line',
//   );

//   const width = document.getElementById('container').scrollWidth;
//   const height = (document.getElementById('container').scrollHeight || 500) - 20;
  
//   graph.data(data);
//   graph.render();

//   // collapse/expand when click the marker
//   graph.on('combo:click', e => {
//     if (e.target.get('name') === 'combo-marker-shape') {
//       // graph.collapseExpandCombo(e.item.getModel().id);
//       graph.collapseExpandCombo(e.item);
//       if (graph.get('layout')) graph.layout();
//       else graph.refreshPositions();
//     }
//   });

//   graph.on('combo:dragend', e => {
//     graph.getCombos().forEach(combo => {
//       graph.setItemState(combo, 'dragenter', false);
//     })
//   });
//   graph.on('node:dragend', e => {
//     graph.getCombos().forEach(combo => {
//       graph.setItemState(combo, 'dragenter', false);
//     })
//   });

//   graph.on('combo:dragenter', e => {
//     graph.setItemState(e.item, 'dragenter', true);
//   });
//   graph.on('combo:dragleave', e => {
//     graph.setItemState(e.item, 'dragenter', false);
//   });
// }